<template>
  <div>
    <div class="marketing-container" v-if="forPublic==0">
      <div class="marking-index">
        <div class="index-header">
          <div class="index-title">营销指标</div>
          <div class="index-tabbar">
            <ui-radio-group v-model="tabPosition" fill="#ccc" @change="onChange">
              <ui-radio-button label="save">存款</ui-radio-button>
              <ui-radio-button label="credit">贷款</ui-radio-button>
              <ui-radio-button label="manage">理财</ui-radio-button>
            </ui-radio-group>
          </div>
        </div>
        <div class="index-pane">
          <div class="process-item" v-for="(item, index) in customColors" :key="index">
            <div class="item-show" v-show="item.current === currentBar" v-for="(itemchild, index) in item.data"
              :key="index">
              <div class="process-title">
                分行名称1
              </div>
              <div class="process-bar">
                <ui-progress :text-inside="true" :stroke-width="20" :percentage="itemchild.percentage" status="success"
                  :format="() => itemchild.num" :color="'#909399'"></ui-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 待定 -->
      <div class="marking-index" style="height: 500px;">
        <div class="index-header">
          <div class="index-title">重点关注指标</div>
          <div class="index-tabbar" style="cursor: pointer;" @click="showZD()">更多</div>
        </div>
        <div class="index-pane" style="display: flex;flex-wrap: wrap;justify-content: center;">
          <div class="zdbody" v-for="(item, index) in zdArr" :key="index">
            <div class="zdcont">
              <span>{{ item.title }}</span>
            </div>
            <div class="zdcont">
              <span>客户数（个）</span>
              <span class="zdnum">{{ item.khmun }}</span>
            </div>
            <div class="zdcont">
              <span>当月增量</span>
              <span class="zdnum">{{ item.khmun }}</span>
            </div>
            <div class="zdcont">
              <span>当季度增量</span>
              <span class="zdnum">{{ item.khmun }}</span>
            </div>
            <div class="zdcont">
              <span>当年度增量</span>
              <span class="zdnum">{{ item.khmun }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 更多重点指标 -->
      <ui-dialog title="重点关注指标" :visible.sync="editHistoryVisible" width="65%">
        <div class="showZDzb">

          <div class="zdbody2" v-for="(item, index) in zdArr" :key="index">
            <div class="gzRadio" v-if="item.showRadio == false" @click="showRadio(index)"></div>
            <div class="gzRadio" v-if="item.showRadio == true" @click="hidenRadio(index)"
              style="background-color:#2D6EFB;">
            </div>
            <div class="zdcont">
              <span>{{ item.title }}</span>
            </div>
            <div class="zdcont">
              <span>客户数（个）</span>
              <span class="zdnum">{{ item.khmun }}</span>
            </div>
            <div class="zdcont">
              <span>当月增量</span>
              <span class="zdnum">{{ item.khmun }}</span>
            </div>
            <div class="zdcont">
              <span>当季度增量</span>
              <span class="zdnum">{{ item.khmun }}</span>
            </div>
            <div class="zdcont">
              <span>当年度增量</span>
              <span class="zdnum">{{ item.khmun }}</span>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <ui-button @click="editHistoryVisible = false">取 消</ui-button>
          <ui-button type="primary" @click="editHistoryVisible = false">确 定</ui-button>
        </span>
      </ui-dialog>
      <!-- 更多重点指标完 -->
    </div>
    <!-- 对公表格内容显示 -->
    <div class="marketing-container" style="height: 400px;" v-if="forPublic==1">
      <div class="marking-index" style="width: 100%;">
        <div class="index-header" style="margin: 20px 0;margin-left: 20px;">
          <div class="index-title">营销指标</div>
          <div style="display: flex;">
            <ui-select v-model="khtype" placeholder="请选择">
              <ui-option :value="0" label="昨日新进客户"></ui-option>
              <ui-option :value="1" label="失败"></ui-option>
            </ui-select>
            <ui-select v-model="khNum" placeholder="请选择" style="margin-left: 20px;">
              <ui-option :value="0" label="昨日前100进账客户"></ui-option>
              <ui-option :value="1" label="失败"></ui-option>
            </ui-select>
          </div>
        </div>
        <div class="index-pane" style="margin-top: 0px;">
          <vx-nodata :list="tableData" sub-title="暂无数据" style="height: 200px;">
            <vx-table-slot :tableData="tableData" :columns="columns" :isSelect="false">
              <template #index="{ scope }">
                <div class="one" v-if="scope.row.index == 1 || scope.row.index == 2 || scope.row.index == 3">
                  <img src="@/assets/image/home/TOP1.png" v-if="scope.row.index == 1">
                  <img src="@/assets/image/home/TOP2.png" v-if="scope.row.index == 2">
                  <img src="@/assets/image/home/TOP3.png" v-if="scope.row.index == 3">
                  <img src="@/assets/image/home/TOP4.png" v-if="scope.row.index == 4">
                  <img src="@/assets/image/home/TOP5.png" v-if="scope.row.index == 5">
                  <span class="oneCont">{{ scope.row.customName }}</span>
                </div>
                <div class="one" v-else style="background: #EFF1FF;">
                  <img src="@/assets/image/home/TOP1.png" v-if="scope.row.index == 1">
                  <img src="@/assets/image/home/TOP2.png" v-if="scope.row.index == 2">
                  <img src="@/assets/image/home/TOP3.png" v-if="scope.row.index == 3">
                  <img src="@/assets/image/home/TOP4.png" v-if="scope.row.index == 4">
                  <img src="@/assets/image/home/TOP5.png" v-if="scope.row.index == 5">
                  <span class="oneCont2">{{ scope.row.customName }}</span>
                </div>
              </template>
              <template #index2="{ scope }">
                <div class="one" v-if="scope.row.index == 1 || scope.row.index == 2 || scope.row.index == 3">
                  <span class="oneCont">{{ scope.row.customName }}</span>
                </div>
                <div class="one" v-else style="background: #EFF1FF;">
                  <span class="oneCont2">{{ scope.row.customName }}</span>
                </div>
              </template>
              <template #index3="{ scope }">
                <div class="one" v-if="scope.row.index == 1 || scope.row.index == 2 || scope.row.index == 3">
                  <span class="oneCont">{{ scope.row.customName }}</span>
                </div>
                <div class="one" v-else style="background: #EFF1FF;">
                  <span class="oneCont2">{{ scope.row.customName }}</span>
                </div>
              </template>
              <template #index4="{ scope }">
                <div class="one" v-if="scope.row.index == 1 || scope.row.index == 2 || scope.row.index == 3">
                  <span class="oneCont">{{ scope.row.customName }}</span>
                </div>
                <div class="one" v-else style="background: #EFF1FF;">
                  <span class="oneCont2">{{ scope.row.customName }}</span>
                </div>
              </template>
            </vx-table-slot>
          </vx-nodata>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vxTableSlot from '@/components/vx-table-slot';
export default {
  data() {
    return {
      khtype: 0,
      khNum: 0,
      tabPosition: 'save',
      customColors: [
        {
          current: 'save',
          data: [
            { percentage: 20, num: 99 },
            { percentage: 40, num: 199 },
            { percentage: 60, num: 299 },
            { percentage: 80, num: 399 },
            { percentage: 100, num: 499 },
          ],
        },
        {
          current: 'manage',
          data: [
            { percentage: 20, num: 89 },
            { percentage: 40, num: 189 },
            { percentage: 60, num: 289 },
            { percentage: 80, num: 389 },
            { percentage: 100, num: 489 },
          ],
        },
        {
          current: 'credit',
          data: [
            { percentage: 20, num: 59 },
            { percentage: 40, num: 159 },
            { percentage: 60, num: 259 },
            { percentage: 80, num: 359 },
            { percentage: 100, num: 459 },
          ],
        },
      ],
      currentBar: 'save',
      zdArr: [{
        title: '信保贷',
        khmun: 20,
        monnum: 30,
        jdnum: 20,
        yearnum: 60,
        showRadio: false
      },
      {
        title: '一年以下存款',
        khmun: 20,
        monnum: 30,
        jdnum: 20,
        yearnum: 60,
        showRadio: false
      },
      {
        title: '二手房按揭',
        khmun: 20,
        monnum: 30,
        jdnum: 20,
        yearnum: 60,
        showRadio: false
      },
      {
        title: '二手房按揭',
        khmun: 20,
        monnum: 30,
        jdnum: 20,
        yearnum: 60,
        showRadio: false
      },
      ],
      editHistoryVisible: false,//更多重点指标
      columns: [
        {
          label: '客户名称',
          prop: 'customName',
          slots: { name: 'index' },
        },
        {
          label: '进账金额（万元）',
          prop: 'customName',
          slots: { name: 'index2' },
        },
        {
          label: '管户机构',
          prop: 'customType',
          slots: { name: 'index3' },
        },
        {
          label: '管户客户经理',
          prop: 'organization',
          slots: { name: 'index4' },
        },
      ],
      tableData: [
        { customName: '1111111111', isConcern: 0, index: 1 },
        { customName: '222222', isConcern: 0, index: 2 },
        { customName: '333333', isConcern: 1, index: 3 },
        { customName: '333333', isConcern: 1, index: 4 },
        { customName: '333333', isConcern: 1, index: 5 },
      ],
    };
  },
  components: {
    vxTableSlot,
  },
  props: {
    forPublic: {
      type: Number,
      default: 0
    }
  },
  methods: {
    // 营销类型切换
    onChange(val) {
      this.currentBar = val;
      console.log(val);
    },
    // 更多重点关注指标
    showZD() {
      this.editHistoryVisible = true;
    },
    // 选择框选择
    showRadio(index) {
      this.zdArr[index].showRadio = true
    },
    // 选择款取消
    hidenRadio(index) {
      this.zdArr[index].showRadio = false
    },
  },
};
</script>

<style lang="scss" scoped>
.marketing-container {
  display: flex;
  width: 100%;
  margin-top: 20px;
  background-color: #fff;

  .marking-index {
    box-sizing: border-box;
    width: 60%;
    margin-right: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;

    .index-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .index-title {
        color: #333;
        font-weight: 600;
        font-size: 20px;
      }

      .index-tabbar {
        .ui-radio-group {
          display: block;
        }
      }
    }

    .index-pane {
      box-sizing: border-box;
      width: 100%;
      padding-left: 10px;
      margin-top: 20px;

      .process-item {
        width: 100%;
        font-size: 14px;

        .item-show {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;

          .process-title {
            margin-right: 30px;
          }

          .process-bar {
            flex: 1;
            padding-right: 20px;
          }
        }
      }
    }
  }

  .marking-data {
    width: 40%;
    height: 150px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }

  .zdbody {
    width: 35%;
    height: 150px;
    background-color: #ccc;
    padding: 10px 10px;
    border-radius: 10px;
    margin: 10px 10px;
  }

  .zdbody2 {
    width: 15%;
    height: 180px;
    background-color: #ccc;
    padding: 20px 20px;
    border-radius: 10px;
    margin: 20px 30px;
    position: relative;
  }

  .gzRadio {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #ddd;
    cursor: pointer;
  }

  .gzRadio .checked:before {
    content: "\2713";
    display: block;
    text-align: center;
    line-height: 20px;
  }

  .zdcont {
    display: flex;
    margin: 10px auto;
  }

  .zdnum {
    line-height: 20px;
    margin-left: 10px;
  }

  .showZDzb {
    display: flex;
    flex-wrap: wrap;
  }

  .showTaber {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 20px 0
  }

  .one {
    display: flex;
    padding-left: 20px;
    width: 100%;
    background: #FFFBEF;
    border-radius: 15px;
  }

  .oneCont {
    color: #FE7329;
    margin-left: 10px;
  }

  .oneCont2 {
    color: #5B73FF;
    margin-left: 10px;
  }

  .one img {
    width: 20px;
    height: 25px;
  }
}
</style>
